<template>
    <view class="container">
        <view class="user-section">
            <view class="vip-card-box" >
                <view class="text-white text-xxlx text-center padding-top-lg ">{{ userinfo.redbag}}</view>
                <view class="text-white text-lg text-center padding-top-sm">红包余额(元)</view>
            </view>
        </view>
        <view class="form-group margin-lr-lg border-b-line padding-0">
            <view class="title text-white">兑换金额</view>
        </view>
        <view class="form-group margin-lr-lg border-b-line padding-0">
            <text class="text-price text-xxlx text-white"></text>
            <input class="text-xxlx text-white" data-key="coin" number focus placeholder="0.00" v-model="coin" @input="inputChange">
            <button class="cu-btn" style="width: 40%;" type="button" @click="fillRedbag()">全部兑换</button>
        </view>
        <view class="form-group margin-lr-lg padding-0 submit_btn">
            <button :disabled="enableExchange" class="cu-btn" type="button" @click="beginExchange()">立即兑换</button>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				enableExchange: !0,
				coin: "",
				userinfo: [],
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
			}
		},
		
		onNavigationBarButtonTap(val) {
			uni.navigateTo({
				url: '/pages/help/other?type=recharge',
			});	
		},
		onLoad: function (option) {
			this.helper.checkLogin();
			this.getData();
		},
		methods: {
			fillRedbag() {
				this.coin = this.userinfo.redbag.toString(); // 将红包余额填入兑换金额输入框
				this.enableExchange = !1
			},			
			getData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getUserInfo",
					timestamp:timestamp,
					data:{username:info.username,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.userinfo = res.data.data.userinfo;
					setTimeout(() => {
						uni.hideLoading();
						console.log(this.userinfo.auth)
						if(this.userinfo.auth == 0){
							uni.showModal({
								title: "提示",
								content: '帐户未实名，现在实名？',
								showCancel:false,
								confirmText: "现在实名",
								success:function(res){
									if(res.confirm){
										uni.navigateTo({
											url: "/pages/user/certification"
										})
									}
								}
							})
						}
					}, 300);
				})
			},

			inputChange: function(n) {
				var e = n.currentTarget.dataset.key;
				this[e] = n.detail.value,
				this.enableExchange = !(parseFloat(n.detail.value) > 0)
			},
			changeCoin: function(redbag) {
				this.coin = redbag,
                this.enableExchange = !1
			},
			beginExchange: function() {
				this.enableExchange = !0;
				
				if(this.coin == ''){
					uni.showToast({
						title:"请输入兑换金额",
						icon:"none"
					})
					return;
				}
				
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['coin='+this.coin,'timestamp='+timestamp,'token='+info.token]);
				this.helper.req({
					api:"doExchange",
					timestamp:timestamp,
					data:{coin:this.coin,token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					uni.showToast({
						title: "兑换成功",
						icon: "success",
						duration: 1000, // 设置显示时间为3秒
						success: function() {
							setTimeout(function() {
								// 在延时之后执行跳转操作
								uni.navigateTo({
									url: '/pages/wallet/redbag', // 跳转到指定页面的路径
									success: function() {
										console.log('跳转成功');
									},
									fail: function(err) {
										console.log('跳转失败', err);
									}
								});
							}, 2000); // 延时3秒后执行跳转
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
page {
    background-color: #0D1A44;
}
.user-section{
	height: 260upx;
	padding: 15px 15px 0;
	background-color: #1C4971;
	border-radius: 5px;
	margin-bottom: 2vh;
	margin-left: 19px;
	margin-right: 19px;
}
	.vip-card-box {

	}
	input.text-xxlx{
		font-size: 50upx;
	}
	.screen-swiper{
		min-height: 300upx;
	}
	.form-group{
	    background-color: #1C4971;
	    padding: 1px 14px;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    min-height: 48px;
	    -webkit-box-pack: justify;
	    -webkit-justify-content: space-between;
	    justify-content: space-between;
		//border-radius: 10px;
	}
	.cu-btn{
		width: 100%;
	}	
	.footer-info {
    background: #e5a92338;
    border-radius: 35px;
    margin-bottom: .59rem;
    padding: 2.67vw;
    margin-top: 10vh;
	}	
</style>